<template>
  <div class="fccm"><img src="~assets/img/logo.png" class="logo-img" /></div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        type="number"
        v-model="data.param.mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="data.mobileRules"
        maxlength="11"
        clearable
        ref="mobileRorm"
      />
      <van-field
        type="number"
        v-model="data.param.vcode"
        name="vcode"
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="data.vcodeRules"
        maxlength="6"
        autocomplete="off"
        clearable
      >
        <template #button>
          <button
            class="get-code"
            :disabled="data.codeDisbled"
            native-type="button"
            @click="getCode"
          >
            {{ data.currentTime }}
          </button>
        </template>
      </van-field>
    </van-cell-group>
    <div class="submit-button-box">
      <van-button
        round
        block
        class="submit-button-bg btn-hover"
        native-type="submit"
        >提 交</van-button
      >
    </div>
    <!-- 您的验证码为：临时解决方案 -->
    <div v-show="data.code" style="text-align: center; margin-top: 50px;font-size:40px">
      您的验证码为：{{ data.code }}
    </div>
  </van-form>
</template>

<script>
let sendTimer = null;
import { ref, reactive, onBeforeUnmount, computed } from "vue";
import { Toast } from "vant";
import { isMobile } from "utils/validate";
import { smsTask } from "api/common.js";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const mobileRorm = ref(null);
    const data = reactive({
      param: {
        mobile: "13201860552",
        vcode: "",
      },
      mobileRules: [
        {
          required: true,
          message: "请填写手机号",
        },
        {
          validator: isMobile,
          message: "请输入正确有效的手机号码",
        },
      ],
      vcodeRules: [
        {
          required: true,
          message: "请输入短信验证码",
        },
        {
          validator: (value) => {
            return value.length == 6;
          },
          message: "请输入6位数短信验证码",
        },
      ],
      code: "",
      codeDisbled: false,
      currentTime: "获取验证码",
    });
    

    function onSubmit(values) {
      values.toPath = route.query.redirect || "/";
      values.router = router;
      if (values.vcode !== data.code) {
        Toast("您输入的验证码不正确");
        return;
      }
      store.dispatch("user/login", values);
    }

    //获取验证码
    async function getCode() {
      mobileRorm.value.validate().then(async (res) => {
        if (res != undefined) {
          Toast(res.message);
          return;
        }
        Toast.loading({
          message: "请稍后...",
          forbidClick: true,
        });
        data.codeDisbled = true;
        await senCode();
      });
    }
    //发送验证码
    async function senCode() {
      return new Promise((resolve, reject) => {
        smsTask({
          mobile: data.param.mobile,
        }).then((res) => {
          if (res.code != 200) {
            data.codeDisbled = false;
            Toast("获取验证码失败，请重试");
            return;
          }
          data.code = res.data.vcode; //临时解决方案
          resolve(res);
          Toast.clear();
          let time = 60;
          sendTimer = setInterval(() => {
            time--;
            data.currentTime = time + "s后重新获取";
            if (time <= 0) {
              data.codeDisbled = false;
              clearInterval(sendTimer);
              data.currentTime = "获取验证码";
            }
          }, 1000);
        });
      });
    }

    onBeforeUnmount(() => {
      if (sendTimer) {
        clearInterval(sendTimer);
      }
    });

    return {
      data,
      mobileRorm,
      onSubmit,
      getCode,
    };
  },
};
</script>

<style scoped lang="scss">
.logo-img {
  padding: 300px 0 100px 0;
}

.get-code {
  background-color: transparent;
  border: none;
}
</style>
